<template>
  <div class="container">
    <el-dialog
      title="发起转账"
      v-model="editVisible"
      width="40%"
      top="5vh"
      :close-on-click-modal="false"
      @close="handleclose"
    >
      <el-form>
        <el-form-item :required="true">
          <div>
            <div>收款账户信息</div>
            <div class="display space-between">
              <div>账户名：{{ orderdetail.receiverAccount }}</div>
              <div>
                金额：<span class="red fontsize20"
                  >￥{{ orderdetail.totalMoney }}</span
                >
              </div>
            </div>
            <div>收款账号：{{ orderdetail.receiverAccount }}</div>
            <div>开户行：{{ orderdetail.receiverAddress }}</div>
            <div class="displayflex">
              <span class="width160">*上传支付凭证（截图）：</span>
              <div v-if="fromSubmit.imageUrl">
                <!--  支持图片放大 -->
                <el-image
                  class="up_img"
                  :src="fromSubmit.tempUrl"
                  :preview-src-list="[fromSubmit.tempUrl]"
                />
                <!-- <img width="100%" :src="item" alt="" v-for="(item, index) in imageUrls"   :preview-src-list="imageUrls"/> -->
                <i class="el-icon-delete" @click="handledeleteImg"></i>
              </div>
              <el-upload
                v-if="!fromSubmit.imageUrl"
                :limit="1"
                :action="uploaddata.url"
                :data="uploaddata.data"
                :headers="uploaddata.headers"
                name="file"
                accept=".png,.jpg,.gif"
                list-type="picture-card"
                @click="handleUpload"
                :on-change="onchangeapplicationform"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div class="btn_b">
        <el-button @click="handleclose" class="icon-search1">取消</el-button>
        <el-button type="primary" class="icon-search" @click="handleSaveEdit"
          >确定</el-button
        >
      </div>
      <template #footer> </template>
    </el-dialog>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import api from "../api/api";
export default {
  components: {},
  setup(props, context) {
    console.log(context);
    // 参考图片
    const editVisible = ref(context.attrs.editVisible);
    const radioValue = ref(context.attrs.radioValue);
    const list = ref(context.attrs.list);
    const router = useRouter();
    const orderdetail = ref(context.attrs.orderdetail);
    const fromSubmit = reactive({
      id: orderdetail.value.id,
      imageUrl: null,
      tempUrl: null,
    });
    const handleclose = () => {
      editVisible.value = false;
      context.emit("handleclose", editVisible.value);
    };
    //图片上传
    const uploaddata = ref({});
    const handleUpload = () => {
      uploaddata.value = {
        url: api.getUrl() + "external/file/upload",
        data: {
          upType: "third",
          sort: Math.floor(Math.random() * 20) + 1,
        },
        headers: {
          token: localStorage.getItem("token"),
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      };
    };
    const onchangeapplicationform = (file, fileList) => {
      console.log(file.response);
      if (file.response && file.response.code == 1) {
        fromSubmit.imageUrl = file.response.data.url;
        fromSubmit.tempUrl = file.response.data.tempUrl;
      }
    };
    const handleSaveEdit = () => {
      context.emit("handleSaveEdit", fromSubmit);
    };
    const handledeleteImg = () => {
      fromSubmit.imageUrl = null;
      fromSubmit.tempUrl = null;
    };
    return {
      orderdetail,
      fromSubmit,
      radioValue,
      editVisible,
      uploaddata,
      handleclose,
      handleSaveEdit,
      onchangeapplicationform,
      handleUpload,
      handledeleteImg,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/common.css";
.btn_b {
  margin-top: 30px;
}
.el-icon-delete {
  font-size: 24px;
  margin-left: 20px;
  position: relative;
  bottom: 140px;
  z-index: 99999;
  right: 50px;
}
.up_img {
  height: 150px;
  width: 150;
  margin-right: 40px;
  position: relative;
}
</style>
